<template>
  <div id="app">
    <Child @child-click="handlerChangeChildvalue" :title="msg"></Child>
    <hr>
    <h1>待办清单</h1>
    <ToDoList 
    @add-list="addList" 
    @remove-all="removeAll"/>
    <div class="box">
      <ul v-for="(item,index) in listData" :key="index">
        <li>{{index+1}} - {{item}}</li>
      </ul>
    </div>
  </div>
</template>
<script>
import { ref } from '@vue/reactivity';
import Child from "./components/Child.vue"
import ToDoList from "./components/ToDoList.vue"
export default {
  components: {
    Child,ToDoList
  },
  setup() {
    const msg = ref('我是父组件的值');
    const handlerChangeChildvalue = (value) => {
      msg.value = value
    };
    const listData = ref([])
    // 添加数据
    const addList = (value) => {
      console.log(value)
      listData.value.push(value)
    }
    // 重置清单
    const removeAll = () => {
      listData.value = []
    }
    return {
      msg,
      handlerChangeChildvalue,
      addList,
      listData,
      removeAll,
    };
  },
};
</script>
<style scoped>
.box{
  width: 300px;
  height: 500px;
  padding: 20px;
  background: #ccc;
}
li{
  list-style: none;
}
</style>